<style lang="scss" scoped>
    .ui-codemirror /deep/ .CodeMirror-wrap {
        height: 100%;
    }

    .fixed {
        position: fixed;
        top: 83px;
        z-index: 99;
    }
</style>
<template>
    <div v-if="!alwaysShow">
        <button :class="{'fixed':fixed}" class="fluid ui button basic m-t-5" @click="onLis">
            <span v-show="showMe"><i class="icon angle up"></i>收起代码</span>
            <span v-show="!showMe"><i class="icon angle down"></i>显示代码</span>
        </button>
        <codemirror v-if="showMe" class="ui-codemirror" v-model="_value" :options="options"></codemirror>
    </div>
    <ui-scrollbar v-else>
        <codemirror class="ui-codemirror" v-model="_value" :options="options"></codemirror>
    </ui-scrollbar>
</template>
<script>
    import { codemirror } from 'vue-codemirror-lite'

    // require htmlmixed mode
    import('codemirror/mode/vue/vue.js')
    import('codemirror/mode/javascript/javascript.js')

    // import hint addon for javacript
    import('codemirror/addon/hint/show-hint.js')
    import('codemirror/addon/hint/show-hint.css')
    import('codemirror/addon/hint/javascript-hint.js')

    import('codemirror/addon/fold/foldgutter.css')
    import('codemirror/addon/fold/foldcode.js')
    import('codemirror/addon/fold/foldgutter.js')
    import('codemirror/addon/fold/brace-fold.js')
    import('codemirror/addon/fold/comment-fold.js')

    // 主题
    import "codemirror/theme/material-palenight.css"

    export default {
        name: 'ui-codemirror',
        components: { codemirror },
        data() {
            return {
                showMe: false,
                top: null,
                fixed: false
            }
        },
        props: {
            alwaysShow: {
                type: Boolean
            },
            dark: {
                type: Boolean
            },
            options: {
                type: Object,
                default() {
                    return {
                        theme: this.dark ? 'material-palenight' : 'default',
                        mode: 'vue',
                        tabSize: 2,
                        lineNumbers: true,
                        extraKeys: { 'Ctrl-Space': 'autocomplete' },
                        matchBrackets: true,    //括号匹配,
                        lineWrapping: true,
                        foldGutter: true,
                        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
                    }
                }
            },
            // 1 自定义组件的语法糖 v-model 怎样实现方式
            value: {
                type: String
            }
        },
        // 2 自定义组件的语法糖 v-model 怎样实现方式
        computed: {
            _value: {
                get() {
                    return this.value;
                },
                set(val) {
                    this.$emit('input', val);
                }
            }
        },
        mounted() {
            // console.log(this.dark)
            /*this.$nextTick(() => {
                setTimeout(() => {

                }, 200)
            })*/
        },
        methods: {
            onLis() {
                this.showMe = !this.showMe
                this.top = this.$el.offsetTop
                let button = $(this.$el).find('button')[0]
                button.style.width = button.clientWidth + 'px'
                document.querySelector('.ui.content.scrollbar').addEventListener('scroll', this.pin)
            },
            pin(e) {
                this.fixed = e.target.scrollTop > this.top;
            }
        },
        destroyed() {
            if (document.querySelector('.ui.content.scrollbar')) {
                document.querySelector('.ui.content.scrollbar').removeEventListener('scroll', this.pin)
            }

        }

    }
</script>
